<template>
	<div class="">
		<el-row :span="24" style="margin:26px 0 0;">
			<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
				<el-form-item label="红包状态">
					<el-select v-model="formInline.redState" style="width: 150px;">
						<el-option label="全部" value=""></el-option>
						<el-option label="领取完" value="1"></el-option>
						<el-option label="未领取完" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="发送时间">
					<el-date-picker type="date" placeholder="开始时间" v-model="startTime" style="width:180px;"></el-date-picker>
					到
					<el-date-picker type="date" placeholder="结束时间" v-model="endTime" style="width:180px;"></el-date-picker>
				</el-form-item>
				<el-form-item label="商家ID"><el-input v-model="formInline.storeId" style="width: 150px;"></el-input></el-form-item>
				<el-form-item label="商家名称"><el-input v-model="formInline.storeName" style="width: 150px;"></el-input></el-form-item>
				<el-button type="primary" @click="fetchData(1)">查询</el-button>
				<el-button type="primary" @click="deriveSubmit">导出</el-button>
			</el-form>
		</el-row>
		<!-- 表格 -->
		<el-table :data="pageInfo.dtos" v-loading="table_loading" element-table_loading-text="加载中" stripe height="500" style="width: 100%">
			<el-table-column label="商家id" prop="storeId"></el-table-column>
			<el-table-column label="商家名称" prop="storeName"></el-table-column>
			<el-table-column label="优惠券金额" :show-overflow-tooltip="true" prop="deduction"></el-table-column>
			<el-table-column label="使用人数" :show-overflow-tooltip="true" prop="redUserNumber"></el-table-column>
			<el-table-column label="红包范围" prop="territorialLimit"></el-table-column>
			<el-table-column label="红包编号" prop="redNo"></el-table-column>
			<el-table-column label="发放时间" prop="redBeginTime"></el-table-column>
			<el-table-column label="红包状态" prop="">
				<template scope="scope">
				  <span v-if="scope.row.redState=='1'" style="color: #20a0ff;">已领取完</span>
				  <el-tooltip class="item" effect="dark" :content="'剩余个数:'+(scope.row.redCount-scope.row.redGantNumber)" placement="left" v-else-if="scope.row.redState=='2'">
						<span style="color: #f56c6c;">未领取完</span>
				  </el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div class="paginate">
			<el-pagination
				@current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum"
				:page-size="pageInfo.pageSize"
				layout="total, prev, pager, next, jumper"
				:total="pageInfo.count"
			></el-pagination>
		</div>
	</div>
</template>

<script>
export default {
	name: 'couponRed',
	data() {
		return {
			table_loading: true,
			formInline: {
				redType:'2',
				createBeginTime: '',
				createEndTime: '',
				storeId:'',//商户ID
				storeName:'',//商户名称
				redState:'',//空表时全部1已领取完2未领取完
				pageNum: 1,
				pageSize: 10,
			},
			pageInfo: {
				pageNum: 1,
				pageSize: 10,
				count: 1,
				dtos: []
			},
			startTime: '',
			endTime: ''
		};
	},
	created() {
		this.initializationTime();
	},
	mounted() {
		let vm = this;
		vm.fetchData(vm.pageInfo.pageNum);
	},
	methods: {
		fetchData(page = 1) {
		  let vm = this;
		  vm.table_loading = true;
		  if (vm.startTime && vm.endTime) {
		    vm.formInline.createBeginTime = dateFormat(vm.startTime);
		    vm.formInline.createEndTime = dateFormat(vm.endTime);
		    console.log('=========== order list', vm.formInline)
		    if (vm.formInline.createBeginTime > vm.formInline.createEndTime) {
		      vm.$message({
		        type: 'warning',
		        message: '开始时间不能大于结束时间'
		      });
		      vm.table_loading = false;
		      return;
		    }
		  } else {
		    vm.formInline.createBeginTime = '';
		    vm.formInline.createEndTime = '';
		  }
		  if (vm.startTime && !vm.endTime) {
		    vm.$message({
		      type: 'warning',
		      message: '请选择结束时间'
		    });
		    vm.table_loading = false;
		    return;
		  }
		  if (!vm.startTime && vm.endTime) {
		    vm.$message({
		      type: 'warning',
		      message: '请选择开始时间'
		    });
		    vm.table_loading = false;
		    return;
		  }
		  vm.pageInfo.pageNum = page;
		  vm.formInline.pageNum = page;
		  console.log('上传的数据',this.formInline)
		  this.$http.get('/devapi/redpacket/alllist', this.formInline).then(res => {
		  	console.log('表格下来的数据======', res);
		  	this.table_loading = false;
		  	if (res.code == 200) {
		  		// let data = JSON.parse(JSON.stringify(res));
				let data = res;
		  		this.pageInfo.dtos = data.rows;
		  		this.pageInfo.count = data.total;
		  	}
		  });
		},
		handleCurrentChange(val) {
			this.fetchData(val);
		},
		initializationTime(){
		  this.endTime=new Date();
		  var begin=new Date();
		  var end=new Date();
		  var timetime=new Date(begin.setMonth((new Date().getMonth()-1)));
		  this.startTime=timetime;
		  // console.log('开始时间：',timetime，'当前时间：',this.endTime)
		},
		deriveSubmit() {
		  let vm = this;
		  let startTime = '';
		  let endTime = '';
		  let redState = vm.formInline.redState;
		  let storeId = vm.formInline.storeId;
		  let storeName=vm.formInline.storeName;
		
		  if (vm.startTime && vm.endTime) {
		    if (vm.startTime > vm.endTime) {
		      this.showMsg('开始时间不能大于结束时间', 'warning');
		      return;
		    }
		    // startTime = dateFormat(vm.startTime);
			startTime = dateFormat(vm.startTime).trim().split(" ")[0];
		    endTime = dateFormat(vm.endTime).trim().split(" ")[0];
		  }
		  if (vm.startTime && !vm.endTime) {
		    startTime = '';
		  }
		  if (!vm.startTime && vm.endTime) {
		    endTime = '';
		  }
		  // console.log('导出传值数据',startTime,'===',endTime,'==',redState,'=',storeId,'=',storeName);
		  // return
		  let host = 'http://47.108.250.79:21001/'
		  location.href = encodeURI(
		    encodeURI(host + 'devapi/redpacket/export?createBeginTime=' + startTime + '&createEndTime=' + endTime + '&redState=' + redState + '&storeId=' + storeId + '&storeName=' + storeName +'&redType=2')
		  );
		}
	}
};
</script>

<style scoped></style>
